<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us" xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://a9.com/-/spec/opensearch/1.1/">
    <title>Online Booking</title>	
	
	<!-- Meta tags -->
	<meta http-equiv="content-language" content="en-us" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<meta http-equiv="Content-Style-Type" content="text/css" />	
	<meta http-equiv="window-target" content="_top" /> <!-- skip frames -->
	<meta name="robots" content="index,follow" />
	<meta name="keywords" content="booking, hotel, hotels, reservations" />
	<meta name="description" content="Online Booking" />
	
	<!-- Favicons --> 
	<link href="img/favicon.png" rel="shortcut icon" type="image/png" />
	<link href="img/favicon.png" rel="icon" type="image/png" />
	
	<!-- Main Stylesheets -->
	<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
	<link href="css/extensions.css" media="screen" rel="stylesheet" type="text/css" /> <!-- browser specific extensions / remove it if you want to validate this document -->
	<link href="css/print.css" media="print" rel="stylesheet" type="text/css" /> <!-- for printing -->
	<!-- Alternate stylesheets/themes -->
	<link href="css/orange.css" media="screen" rel="alternate stylesheet" type="text/css" title="orange" />
	<link href="css/pink.css" media="screen" rel="alternate stylesheet" type="text/css" title="pink" />
	<link href="css/red.css" media="screen" rel="alternate stylesheet" type="text/css" title="red" />
	<link href="css/blue.css" media="screen" rel="alternate stylesheet" type="text/css" title="blue" />
	<link href="css/brown.css" media="screen" rel="alternate stylesheet" type="text/css" title="brown" />
	<link href="css/cyan.css" media="screen" rel="alternate stylesheet" type="text/css" title="cyan" />
	<link href="css/purple.css" media="screen" rel="alternate stylesheet" type="text/css" title="purple" />
	<!-- Your Custom Stylesheet --> 
	<link href="css/custom.css" media="screen" rel="stylesheet" type="text/css" />
	
	<!-- RSS links (if needed) -->
	<link href="top.rss" rel="alternate" type="application/rss+xml" title="Top Destinations" />
	<link href="deals.rss" rel="alternate" type="application/rss+xml" title="Best Deals" />
	<link href="blog.rss" rel="alternate" type="application/rss+xml" title="Latest News" />
	
	<!-- jQuery with plugins -->
	<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> <!-- Could be loaded remotely from Google CDN : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> -->
	<script src="js/jquery.ui.core.min.js" type="text/javascript"></script>
	<script src="js/jquery.ui.widget.min.js" type="text/javascript"></script>
	<script src="js/jquery.ui.tabs.min.js" type="text/javascript"></script>
	<script src="js/jquery.datepick.pack.js" type="text/javascript"></script>
	<script src="js/jquery.datepick-en-GB.js" type="text/javascript"></script> <!--  Datepick localisations: http://keith-wood.name/datepick.html -->
	<script src="js/jquery.imgpreview.js" type="text/javascript"></script>
	<script src="js/jquery.nyroModal.pack.js" type="text/javascript"></script>
	<script src="js/jquery.notice.js" type="text/javascript"></script>
	<script src="js/jquery.cycle.pack.js" type="text/javascript"></script>
	<script src="js/jquery.notice.js" type="text/javascript"></script>
	
	<!-- Google maps and marker clustering -->
	<script src="http://www.google.com/jsapi?autoload={'modules':[{name:'maps',version:3,other_params:'sensor=false'}]}" type="text/javascript"></script>
	<script src="js/Fluster2.packed.js" type="text/javascript"></script>
	
	<!-- Custom template functions -->
	<script src="js/custom.js" type="text/javascript"></script>
	
	<!-- Style switcher : only needed here for theme demonstration (does not work in IE7) -->
	<script src="js/styleswitch.js" type="text/javascript"></script>
	
	<!-- Internet Explorer Fixes --> 
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" media="all" href="css/ie.css"/>
	<![endif]-->
	<!--Upgrade MSIE5.5-7 to be compatible with MSIE8: http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js -->
	<!--[if lt IE 8]>
	<script src="js/IE8.js"></script>
	<![endif]-->
	
	<script type="text/javascript">
	//<![CDATA[
	
	// check-out date >= check-in date
	function customRange(dates) { 
		if (this.id == 'startdate') { 
			$('#enddate').datepick('option', 'minDate', dates[0] || null); 
		} 
		else { 
			$('#startdate').datepick('option', 'maxDate', dates[0] || null); 
		}
		var edt = $('#ed_timestamp').val();
		var sdt = $('#sd_timestamp').val();
		if ((edt > 0) && (sdt > 0)) {
			$('span.nights').text((edt - sdt) / (3600*24) + ' night(s)');
		} else {
			$('span.nights').text('');
		}
	}
	
	$(document).ready(function(){
		
		// Datepick input fields
		$('#startdate').datepick({
			onSelect: customRange, 
			showTrigger: '#trigger',
			altField: '#sd_timestamp', 
			altFormat: $.datepick.TIMESTAMP
		});
		$('#enddate').datepick({
			onSelect: customRange, 
			showTrigger: '#trigger',
			altField: '#ed_timestamp', 
			altFormat: $.datepick.TIMESTAMP
		});
		
		// Carousel slider
		$('.carousel ul').cycle({
			prev: '.previous',
			next: '.next',
			timeout: 6000,
			pause: 1
		});
		
		/* tabs */
		var tabs = $("#tabs").tabs();		
		
		// Template setup
		Site.setup();
		
		// Google map setup
		// centerX: 27.9944
		// centerY: -9.84375
		// zoom: 2
		// clustering: true
		// NOTE: hotel list is loaded on the bottom of this file
		Site.gmapInit(27.9944, -9.84375, 2, true);
		
	});
	
	//]]>
	</script>
</head>

<body>
	
<div class="container container_12">
	<!-- Header -->
	<div class="grid_12">
		<!-- Logo container -->
		<div id="logo"></div>
		
		<!-- Aside menu -->
		<div id="topmenu" class="tr">
			<form method="get" action="">
				<select class="smallselect" name="lang" id="lang" onchange="$(this).parent().submit();">
					<option value="en" selected="selected">English</option>
					<option value="de">Deutch</option>
					<option value="es">Español</option>
				</select>
				<select class="smallselect" name="currency" id="currency" onchange="$(this).parent().submit();">
					<option value="usd" selected="selected">US Dollar (US$)</option>
					<option value="eur">Euro (&euro;)</option>
					<option value="gbp">Pound sterling (&pound;)</option>
				</select>
				<!-- Theme switcher - only for theme demonstration - can be removed -->
				<select class="smallselect" name="style" id="style" onchange="chooseStyle(this.value, 60);">
					<option value="none">CSS: Default</option>
					<option value="orange">CSS: Orange</option>
					<option value="pink">CSS: Pink</option>
					<option value="red">CSS: Red</option>
					<option value="blue">CSS: Blue</option>
					<option value="brown">CSS: Brown</option>
					<option value="cyan">CSS: Cyan</option>
					<option value="purple">CSS: Purple</option>
				</select>
			</form>
		</div>
		<!-- End of Aside menu -->
		
		<!-- Main navigation -->
		<div class="radius" id="navigation">
			<ul id="nav">
				<li class="current_page_item"><a href="#" title="Home">Home</a></li>
				<li class="">
					<a title="Destinations" href="#">Destinations</a>
					<!-- Dropdown menu -->
					<div class="dropdown_submenu tripple">
						<ul>
							<li class="dropdown_heading">Worldwide</li>
							<li><a href="#">North America</a></li>
							<li><a href="#">South America</a></li>
							<li><a href="#">Australia</a></li>
							<li><a href="#">Africa</a></li>
							<li><a href="#">Asia</a></li>
							<li><a href="#">Europe</a></li>
						</ul>
						<ul>
							<li class="dropdown_heading">Top Countries</li>
							<li><a href="#">USA</a></li>
							<li><a href="#">Italy</a></li>
							<li><a href="#">Netherlands</a></li>
							<li><a href="#">France</a></li>
							<li><a href="#">Singapore</a></li>
							<li><a href="#">Spain</a></li>
						</ul>
						<ul>
							<li class="dropdown_heading">Top Cities</li>
							<li><a href="#">Dubai</a></li>
							<li><a href="#">Rome</a></li>
							<li><a href="#">Dublin</a></li>
							<li><a href="#">Las Vegas</a></li>
							<li><a href="#">Singapore</a></li>
							<li><a href="#">Amsterdam</a></li>
						</ul>
						<a class="dropdown_subfoot" href="#">Browse destinations &raquo;</a>
					</div>				
					<!-- End of Dropdown menu -->
				</li>
				<li class=""><a title="Hotel Guides" href="#">Hotel Guides</a></li>
				<li class=""><a title="Vacation Ideas" href="#">Vacation Ideas</a></li>
				<li class="separator">&nbsp;</li>
				<li class=""><a title="My Bookings" href="#">My Bookings</a></li>
				<li class="separator">&nbsp;</li>
				<li class="">
					<a title="My Bookings" href="#">Sample Pages</a>
					<!-- Dropdown menu -->
					<div class="dropdown_submenu double">
						<ul>
							<li class="dropdown_heading">Hotels</li>
							<li><a href="index.htm">Homepage</a></li>
							<li><a href="search.htm">Search hotels</a></li>
							<li><a href="browse.htm">Browse destinations</a></li>
							<li><a href="hotel.htm">Hotel data</a></li>
							<li><a href="print-map.htm">Print preview</a></li>
							<li><a href="checkout.htm">Checkout</a></li>
						</ul>
						<ul>
							<li class="dropdown_heading">Misc</li>
							<li><a href="contact.htm">Contact page</a></li>
							<li><a href="faq.htm">FAQ</a></li>
							<li><a href="full.htm">Full width page</a></li>
							<li><a href="sitemap.htm">Sitemap</a></li>
							<li><a href="typography.htm">Typography</a></li>
						</ul>
					</div>				
					<!-- End of Dropdown menu -->
				</li>
			</ul><!-- /#nav -->
		</div>
		<!-- End of Main navigation -->
		
	</div>
	<!-- End of Header -->

	<!-- Search form -->
	<div class='grid_4'>
		<div class="box radius fixheight">
			<div class="padded">
				<h2 class="headline radius"><b>Search</b> Hotels</h2>
				<form name="booking" method="get" action="">
					<!-- calendar image container -->
					<span style="display:none;"><img class="trigger" id="trigger" alt="" src="img/blank.gif" /></span>
					<fieldset class="radius">
						<p>
							<label class="" for="destination">Where are you going?</label><br/>
							<input type="text" id="destination" class="full" value="" name="destination"/>
						</p>
						<p>
							<label class="" for="startdate">Check in</label><br/>
							<input type="text" id="startdate" class="" value="" name="startdate"/>
							<input type="hidden" name="sd_timestamp" id="sd_timestamp" />
						</p>
						<p>
							<label class="" for="enddate">Check out</label><br/>
							<input type="text" id="enddate" class="" value="" name="enddate"/>
							<input type="hidden" name="ed_timestamp" id="ed_timestamp" /> <span class="nights"></span>
						</p>
						<p><input type="checkbox" id="flexible" class="" value="1" name="flexible"/> <label class="choice" for="flexible">My dates are flexible</label></p>
						<p>
							<label class="" for="adults">How many people?</label><br/>
							Adults <select id="adults" name="adults">
								<option value="1" selected="selected">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
								<option value="5">5</option>
								<option value="6">6</option>
								<option value="7">7</option>
								<option value="8">8</option>
								<option value="9">9</option>
								<option value="10">10</option>
							</select>
							Children <select id="children" name="children">
								<option value="0" selected="selected">0</option>
								<option value="1">1</option>
								<option value="2">2</option>
								<option value="3">3</option>
								<option value="4">4</option>
							</select>
						</p>
						<hr class="thin" />
						<p>
							<label class="" for="sortOrder">Sorted by</label><br/>
							<select id="sortOrder" name="sortOrder">
								<option title="Sort by price - low to high" value="PRICE_ASC">Price - low to high</option>
								<option title="Sort by price - low to high" value="PRICE_DESC">Price - high to low</option>
								<option title="Sort by star rating - high to low" value="STAR_RATING_DESC">Star rating - high to low</option>
								<option title="Sort by star rating - low to high" value="STAR_RATING_ASC">Star rating - low to high</option>
								<option title="Sort by guest rating" value="GUEST_RATING_ASC">Guest rating</option>
							</select>
						</p>
						<input type="submit" class="btn btn-custom radius fr" value="Search &raquo;" />
					</fieldset>
				</form>
			</div>
		</div>
	</div>
	<!-- End of Search form -->
	
	<!-- Carousel -->
	<div class='grid_4'>
		<div class="carousel">
			<a class="previous" href="#">&lt;</a>
			<ul>
				<li>
					<img src="img/carousel/promotion-1.png" alt="" /><br />
					<h4><a href="#">Book now &raquo;</a></h4>
				</li>
				<li>
					<img src="img/carousel/carousel-1.jpg" alt="" /><br />
					<h4><a href="#">Monte Carlo on Sale! <br/><small>Stay 10 nights. Get 1 free!</small></a></h4>
				</li>
				<li>
					<img src="img/carousel/carousel-2.jpg" alt="" /><br />
					<h4><a href="#">Venice on Sale! <br /><small>as low as &euro;49</small></a></h4>
				</li>
				<li>
					<img src="img/carousel/carousel-3.jpg" alt="" /><br />
					<h4><a href="#">Cairo on Sale! <br /><small>Save up to 40%</small></a></h4>
				</li>
			</ul>
			<a class="next" href="#">&gt;</a>
		</div>
	</div>
	<!-- End of Carousel -->
	
	<!-- Top destinations -->
	<div class='grid_4'>
		<div class="box radius fixheight">
			<div class="padded">
				<h2 class="headline radius"><b>Top</b> Destinations</h2>
				<div id="top-destination-panel" class="radius">
					<div id="tabs" class="">
						<ul>
							<li><a href="#tabs-1">Cities</a></li>
							<li><a href="#tabs-2">Beaches</a></li>
						</ul>
						<div id="tabs-1">
							<ul class="list">
								<li><span class="fr">from <span class="price">&euro;119</span></span><a href="#">Madrid</a></li>
								<li><span class="fr">from <span class="price">&euro;99</span></span><a href="#">Amsterdam</a></li>
								<li><span class="fr">from <span class="price">&euro;79</span></span><a href="#">London</a></li>
								<li><span class="fr">from <span class="price">&euro;110</span></span><a href="#">Dubai</a></li>
								<li><span class="fr">from <span class="price">&euro;40</span></span><a href="#">Rome</a></li>
								<li><span class="fr">from <span class="price">&euro;90</span></span><a href="#">Las Vegas</a></li>
								<li><span class="fr">from <span class="price">&euro;50</span></span><a href="#">Singapore</a></li>
								<li><span class="fr">from <span class="price">&euro;60</span></span><a href="#">New York</a></li>
							</ul>
						</div>
						<div id="tabs-2">
							<ul class="list">
								<li><span class="fr">from <span class="price">&euro;50</span></span><a href="#">Ibiza</a></li>
								<li><span class="fr">from <span class="price">&euro;70</span></span><a href="#">Bora Bora</a></li>
								<li><span class="fr">from <span class="price">&euro;75</span></span><a href="#">Cuba</a></li>
								<li><span class="fr">from <span class="price">&euro;61</span></span><a href="#">Koh Samui</a></li>
								<li><span class="fr">from <span class="price">&euro;53</span></span><a href="#">Miami</a></li>
								<li><span class="fr">from <span class="price">&euro;80</span></span><a href="#">French Riviera</a></li>
								<li><span class="fr">from <span class="price">&euro;39</span></span><a href="#">Turks &amp; Caicos</a></li>
								<li><span class="fr">from <span class="price">&euro;80</span></span><a href="#">Hawaii</a></li>
							</ul>
						</div>
					</div>
					<div class="fr tr">
						<a href="#">Top 50 Cities &raquo;</a><br />
						<a href="#">All countries &raquo;</a><br />
						<a href="#">All hotels &raquo;</a>
					</div>
					<div class="clear">&nbsp;</div>
				</div>
			</div>
		</div>
	</div>
	<!-- End of Top destinations -->
	
	<div class="grid_12">&nbsp;</div>
	
	<!-- Google map -->
	<div class="grid_12">
		<div class="box radius padded">
			<h2 class="gray radius">Hotels by Location</h2>
			<p>
				<a href="#" onclick="Site.mapSetCenter(47.398349200359256, 19.16015625, 4); return false;" class="small btn radius">Europe</a>
				<a href="#" onclick="Site.mapSetCenter(25.005972656239187, 92.98828125, 3); return false;" class="small btn radius">Asia</a>
				<a href="#" onclick="Site.mapSetCenter(-25.79989118208832, 133.59375, 4); return false;" class="small btn radius">Australia</a>
				<a href="#" onclick="Site.mapSetCenter(7.710991655433229, 21.4453125, 3); return false;" class="small btn radius">Africa</a>
				<a href="#" onclick="Site.mapSetCenter(49.837982453084834, -101.953125, 3); return false;" class="small btn radius">North America</a>
				<a href="#" onclick="Site.mapSetCenter(-20.3034175184893, -60.46875, 3); return false;" class="small btn radius">South America</a>
			</p>
			<div id="map_canvas" style="height:400px;"></div> 
		</div>
	</div>
	<!-- End of Google map -->
	
	<div class="grid_12">&nbsp;</div>
 	
	<!-- Info boxes -->
	<div class='grid_4'>
		<div class="box radius">
			<div class="padded">
				<h2 class="gray radius">Guest Corner</h2>
				<ul>
					<li><a href="#">FAQ</a></li>
					<li><a href="#">How to make a reservation?</a></li>
					<li><a href="#">Additional information</a></li>
					<li><a href="#">Payment options</a></li>
					<li><a href="#">Booking tips</a></li>
					<li><a href="#">Site feedback</a></li>
				</ul>
			</div>
		</div>
	</div>
	<div class='grid_4'>
		<div class="box radius">
			<div class="padded tc">
				<h2 class="gray radius">Customer Service</h2>
				<p class="callcenter"><small>Book online or call:</small><span>1-800-123-456789</span></p>
				<p class="small">This call is free. 24 hours a day, 7 days a week!</p>
				<a href="#" title="Skype Call"><img src="img/skype.png" alt="Skype Call" /></a>
			</div>
		</div>
	</div>
	<div class='grid_4'>
		<div class="box radius">
			<div class="padded">
				<h2 class="gray radius">Newsletter</h2>
				<p>Type in your e-mail to stay up to date with our promotions:</p>
				<form name="login" action="">
					<p>
						<label class="" for="newsletter">Email</label><br/>
						<input type="text" id="newsletter" class="full" value="" name="newsletter"/>
					</p>
					<input type="submit" class="btn radius fr" value="Subscribe" />
				</form>
			</div>
		</div>
	</div>
	<!-- End of Info boxes -->

	<p>&nbsp;</p>
	<div class="clear">&nbsp;</div>
	
</div>

<!-- Subfooter -->
<div id="subfooter">
	<div class="container_12 padded">
		<div class='grid_12'>
			<h5>Reasons for choosing us</h5>
		</div>
		<div class='grid_3'><b>Low rates</b><br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
		<div class='grid_3'><b>Maximum choice</b><br />Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
		<div class='grid_3'><b>Satisfied guests</b><br />Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
		<div class='grid_3'><b>We speak your language</b><br />Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
		<div class="clear">&nbsp;</div>
	</div>
</div>
<!-- End of Subfooter -->

<!-- Footer -->
<div id="footer">
	<div class="container_12 padded">
		<div class="grid_3">
			<h3>Online Booking</h3>
			<p class="small">Copyright &copy; 2010 <b>Company Name</b><br />All rights reserved.</p>
			<p class="small">Book online or call: <b>1-800-123-456789</b></p>
			<a href="#"><img src="img/social/twitter.png" alt="twitter" /></a> 
			<a href="#"><img src="img/social/facebook.png" alt="facebook" /></a> 
			<a href="#"><img src="img/social/flickr.png" alt="flickr" /></a>
			<a href="#"><img src="img/social/youtube.png" alt="YouTube" /></a>
			<a href="#"><img src="img/social/rss.png" alt="RSS" /></a>
			<p class="small"><a href="#">Sitemap</a> &middot; <a href="#">Blog</a></p>
		</div>
		<div class='grid_3'>
			<h3>Suppliers, Affiliates, Media</h3>
			<ul>
				<li><a href="#">Add Hotel</a></li>
				<li><a href="#">Affiliate With Us</a></li>
				<li><a href="#">Promote With Us</a></li>
				<li><a href="#">Travel Agents</a></li>
				<li><a href="#">Press Office</a></li>
			</ul>
		</div>
		<div class='grid_3'>
			<h3>About</h3>
			<ul>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Partners</a></li>
				<li><a href="#">Customer Service</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">Terms &amp; Conditions</a></li>
				<li><a href="#">Privacy Statement</a></li>
			</ul>
		</div>
		<div class='grid_3'>
			<h3>Affiliate/Partner Login</h3>
			<form name="login" action="">
				<p>
					<label class="" for="email">Email</label><br/>
					<input type="text" id="email" class="full" value="" name="email"/>
				</p>
				<p>
					<label class="" for="password">Password</label><br/>
					<input type="password" id="password" class="full" value="" name="password"/>
				</p>
				<p>
					<input type="checkbox" id="remember" class="" value="1" name="remember" />
					<label class="choice" for="remember">Remember me</label>
				</p>
				<input type="submit" class="btn radius fr" value="Sign in &raquo;" />
			</form>
		</div>
		<div class="clear">&nbsp;</div>
	</div>
</div>
<!-- End of Footer -->

<!-- Scroll to top link -->
<a href="#" id="totop" class="radius" title="back to top"><img src="img/top.png" alt="back to top" /></a>

<!-- Hotel array data -->
<script type="text/javascript" src="js/hotels/amsterdam.js"></script>
<script type="text/javascript" src="js/hotels/bahamas.js"></script>
<script type="text/javascript" src="js/hotels/budapest.js"></script>
<script type="text/javascript" src="js/hotels/cairo.js"></script>
<script type="text/javascript" src="js/hotels/caymanislands.js"></script>
<script type="text/javascript" src="js/hotels/corfu.js"></script>
<script type="text/javascript" src="js/hotels/dubai.js"></script>
<script type="text/javascript" src="js/hotels/honolulu.js"></script>
<script type="text/javascript" src="js/hotels/lasvegas.js"></script>
<script type="text/javascript" src="js/hotels/london.js"></script>
<script type="text/javascript" src="js/hotels/miami.js"></script>
<script type="text/javascript" src="js/hotels/newguinea.js"></script>
<script type="text/javascript" src="js/hotels/newyork.js"></script>
<script type="text/javascript" src="js/hotels/moscow.js"></script>
<script type="text/javascript" src="js/hotels/paris.js"></script>
<script type="text/javascript" src="js/hotels/phillipines.js"></script>
<script type="text/javascript" src="js/hotels/prague.js"></script>
<script type="text/javascript" src="js/hotels/rome.js"></script>
<script type="text/javascript" src="js/hotels/singapore.js"></script>
<script type="text/javascript" src="js/hotels/sydney.js"></script>
<script type="text/javascript" src="js/hotels/tokyo.js"></script>

</body>
</html>